<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script type="text/javascript" src="/js/jquery.min.js"></script>

    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="/js/html5.min.js"></script>
    <script src="/js/respond.min.js"></script>
    <![endif]-->
</head>
<style>
    .layui-form-item .layui-input-inline {
        width: 300px!important;
    }
    .layui-upload-img {
        width: 92px;
        height: 92px;
        margin: 0 10px 10px 0;
    }
    #ueditor_0 img{
        width: 100%!important;
    }
</style>
<script>
    BASE_URL = '<?= isset($base_url) ? $base_url : '' ?>';
    STORE_URL = '<?= isset($store_url) ? $store_url : '' ?>';
</script>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form" id="form">

            <div class="layui-form-item">
                <label for="username" class="layui-form-label"><span class="x-red">*</span>标题</label>
                <div class="layui-input-inline">
                    <input type="text"  name="title"  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="username" class="layui-form-label"><span class="x-red">*</span>描述</label>
                <div class="layui-input-inline">
                    <input type="text"  name="desc"  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label for="username" class="layui-form-label"><span class="x-red">*</span>发布者</label>
                <div class="layui-input-inline">
                    <input type="text"  name="author"  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="phone" class="layui-form-label"><span class="x-red">*</span>图片</label>
                <div class="layui-input-inline">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="test1">上传图片</button>
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" id="demo1">
                            <p id="demoText"></p>
                        </div>
                    </div>

                    <input type="hidden" id="img_id"  name="cover" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="username" class="layui-form-label"><span class="x-red">*</span>阅读量</label>
                <div class="layui-input-inline">
                    <input type="text" value="0" name="view"  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="phone" class="layui-form-label"><span class="x-red">*</span>状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="status" value="10" title="显示" checked>
                    <input type="radio" name="status" value="20" title="隐藏">
                </div>
            </div>




            <div class="layui-form-item">
                <label for="username" class="layui-form-label"><span class="x-red">*</span>内容</label>
                <div class="layui-input-inline">
                    <textarea id="container" type="text/plain" name="content" style="width: 300px;height: 600px"></textarea>
                </div>
            </div>


            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label"></label>
                <button type="button" id="btn"  class="layui-btn" lay-submit="" lay-filter="add">保存</button>
            </div>
        </form>
    </div>
</div>
<script src="/ueditor/ueditor.config.js"></script>
<script src="/ueditor/ueditor.all.js"></script>
</body>
</html>

<script>
    // 富文本编辑器
    var ue = UE.getEditor('container');

    layui.use(['form','upload'], function(){
        var upload = layui.upload;
        $ = layui.jquery;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,field:'imageFile'
            ,url: '/?r=admin-base/upload'
            ,before: function(obj){

            }
            ,done: function(res){
                if (res.code){
                    $('#demo1').attr('src', res.url); //图片链接（base64）
                    $('#img_id').val(res.img_id); //图片链接（base64）
                }else{
                    layer.alert(res.msg);
                }
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
    });

    $('#btn').click(function () {
        $.ajax({
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url:'/?r=article/add',
            data:new FormData(document.getElementById("form")),
            processData:false,
            contentType:false,
            success: function (res) {
                if (res.code){
                    layer.msg(res.msg);
                    setTimeout(function () {
                        parent.location.reload();
                    },500);

                }else{
                    layer.msg(res.msg);
                }
            },
            error : function() {

            }
        });
    });
</script>
